<template>
  <Card style="height:100%">
    <!-- 搜索+导出 -->
    <div class="search-con search-con-top">
      <Input class="search-input" 
        v-model="searchValue" clearable :maxlength='50' 
        placeholder="输入关键字搜索"
        @on-change="handlerGetTaskLogList"
        />
      <ButtonGroup class="search-btn">
        <Button @click="handlerExportData()"><Icon type="ios-download-outline"></Icon>导出数据</Button>
      </ButtonGroup>
    </div>

    <!-- 表格：columns， data -->
    <Table size="small" ref="selection"  :columns="columns" :data="tableData"/>
   
    <!-- 分页 -->
    <div style="margin: 10px;overflow: hidden">
      <div style="float: left;">
        <Page :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total show-sizer :page-size-opts="[2, 5, 10,15,20,50,500,1000]"
            @on-change="changePage" @on-page-size-change="handlePageSize" />
      </div>
    </div>

  </Card>
</template>

<script>
import { getTaskLogList } from '@/api/ops_tools/task.js'
export default {
  data () {
    return {
      columns: [
        {
          title: 'id',
          key: 'tasklog_id',
          align: 'left',
          minWidth: 120,
          maxWidth: 320,
          sortable: true,
        },
        {
          title: '任务id',
          key: 'tasklog_tid',
          align: 'left',
          minWidth: 300,
        },
        {
          title: '任务结果',
          key: 'tasklog_result',
          align: 'left',
          sortable: true,
          minWidth: 220,
          
        },
        {
          title: '任务状态',
          key: 'tasklog_status',
          width: 140,
          align: 'center',
        },
        {
          title: '#',
          key: 'handle',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h("div",[
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.delData(params)
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      tableData: [],
      pageTotal: 0, // 数据总数
      pageNum: 1, // 当前页码
      pageSize: 15, // 每页条数
      searchValue: '',
    }
  },
  methods: {
    handlerGetTaskLogList () {
      // this.searchValue
      // 当前页、每一页的条数，查询关键字
      getTaskLogList(this.pageNum, this.pageSize, this.searchValue).then(
      // 如果执行成功 => http状态码为200
      res => {
        if (res.data.status_code === 10000) {
          this.pageTotal = res.data.count
          this.tableData = res.data.data
        } else {
          this.$Message.error(`${res.data.message}`)
        }
      },
      // 如果执行失败 => http状态码为非200的时候
      error => {
        console.log("出错了")
        console.log(error.response)
        this.$Message.error(`${error.response.data.message}`)
      })
    },
     // 切换页码
    changePage(value){
      this.pageNum = value
      this.handlerGetTaskList()
    },    
    handlePageSize(value){
       this.pageSize = value
       this.handlerGetTaskList()
    }, 
     //导出数据
    handlerExportData(){
      let nowTime = Date.parse(new Date())
      this.$refs.selection.exportCsv({
          filename: `命令信息-${nowTime}`,
       });
    }
  },
  mounted (){
    console.log("mounted")
    this.handlerGetTaskLogList()
  }
}
</script>

<style lang="less" scoped>
  .search-con {
    padding: 5px 0;
    .search {
      &-col {
        display: inline-block;
        width: 200px;
      }
      &-input {
        display: inline-block;
        width: 350px;
        margin-left: 2px;
      }
      &-btn {
        margin-right: 0px;
        float:right;
      }
    }
  }
</style>
